@imgUrl: "/pr/pc/theme/technology2/images";
.header-area {
	display: flex;
	flex-direction: column;
	background: url("@{imgUrl}/title_bg.png") center top no-repeat;
	height: auto;
	.logo-area {
		height: 80px;
		position: relative;
		&::before {
			content: "";
			width: 200px;
			height: 2px;
			background: linear-gradient(45deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
			position: absolute;
			bottom: 0;
			left: calc(50% - 200px);
			border-radius: 50%;
			box-shadow1: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 4px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.5), 0 0 8px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5);
			animation: animate1 5s ease-in-out infinite;
			@keyframes animate {
				0% {
					width: 0;
				}
				50% {
					width: 400px;
				}
				100% {
					width: 0;
				}
			}
			@keyframes animate1 {
				0% {
					transform: translate(0px);
				}
				50% {
					transform: translate(200px);
				}
				100% {
					transform: translate(0px);
				}
			}
		}
	}
	.head-menu-area-bk {
		.head-menu-area-main {
			position: relative;
			top: 0;
			display: flex;
			justify-content: center;
			padding: 0.5rem 0;
			.head-menu-area {
				li {
					border: 1px solid rgba(255, 255, 255, 0.2);
					position: relative;
					margin: 0 10px;
					border-radius: 0 4px;
					&::before,
					&::after {
						content: "";
						position: absolute;
						width: 4px;
						height: 4px;
					}
					&::before {
						top: -1px;
						left: -1px;
						border-left: 1px solid rgba(255, 255, 255, 0.4);
						border-top: 1px solid rgba(255, 255, 255, 0.4);
					}
					&::after {
						bottom: -1px;
						right: -1px;
						border-right: 1px solid rgba(255, 255, 255, 0.4);
						border-bottom: 1px solid rgba(255, 255, 255, 0.4);
					}
					a {
						font-size: 14px;
						font-weight: normal;
						&.hover {
							font-weight: bold;
						}
					}
					&.hover,
					&:hover {
						border: 1px solid rgba(0, 153, 255, 0.5);
						background: rgba(0, 153, 255, 0.2);
						box-shadow: 0 0 10px rgb(0 153 255 / 70%);
					}
				}
			}
		}
	}
}
.main {
	padding: 10px;
	.layadmin-pagetabs {
		top: 0;
		left: 0;
		background: 0 0;
		margin: 0 0 10px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 8px;
			height: 8px;
		}
		&::before {
			top: -1px;
			left: -1px;
			border-left: 1px solid rgba(255, 255, 255, 0.4);
			border-top: 1px solid rgba(255, 255, 255, 0.4);
		}
		&::after {
			bottom: -1px;
			right: -1px;
			border-right: 1px solid rgba(255, 255, 255, 0.4);
			border-bottom: 1px solid rgba(255, 255, 255, 0.4);
		}
	}
	.layui-side {
		@keyframes hideMenu {
			0% {
				opacity: 0;
				transform: translate(-100px, 0);
			}

			100% {
				opacity: 1;
				transform: translate(0, 0);
			}
		}
		background: 0 0;
		display: flex;
		flex-direction: column;
		height: auto;
		align-self: flex-start;
		max-height: 100%;
		width: 260px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		box-shadow: inset 0 0 20px rgb(255 255 255 / 20%);
		position: relative;
		padding: 4px;
		box-sizing: border-box;
		margin: 0 10px 0 0;
		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
		}
		&::before {
			top: 0px;
			left: 0px;
			border-left: 1px solid #2e60b2;
			border-top: 1px solid #2e60b2;
		}
		&::after {
			bottom: 0px;
			right: 0px;
			border-right: 1px solid #2e60b2;
			border-bottom: 1px solid #2e60b2;
		}
        & > .layui-side-scroll {
            width: auto;
            // max-height: 100%;
            flex: auto;
            overflow: auto;
            padding: 0;
            & > .layui-side-menu {
            }
            & > .layui-nav {
                margin: 0;
                width: 100%;
                padding:10px 0;
                box-sizing: border-box;
                .layui-nav-more{
                    // font-family: 'zkuasgm-icon';
                    content: '';
                    width:20px;
                    height:20px;
                    position: relative;
                    top:0;
                    right:0;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all .4s;
                    -webkit-transition: all .4s;
                    background:rgba(0,0,0,.8);
                    border-radius: 50px;
                    border:0;
                    &::before{
                        // font-family: 'zkuasgm-icon';
                        // content: '\e9bf';
                        font-family: 'layui-icon';
                        content: '\e602';
    
                    }
                    // align-self:flex-end;
                }
                
                & > .layui-nav-item {
                    box-sizing: border-box;
                    margin:4px 0;
                    dd{
                        & > a{
                            padding:0 10px 0 10px;
                            height: auto;
                            line-height: auto;
                            display: flex;
                            align-items: center;
                            line-height: 40px;
                            border:0 !important;
                            // border-top-right-radius: 32px;
                            // border-bottom-right-radius: 32px;
                            // border-radius: 0 32px 32px 0;
                            & > cite{
                                flex:auto;
                                padding:0 0 0 4px;
                                transition: all .4s;
                                -webkit-transition: all .4s;
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                                width: 50px;
                            }
                            &:hover{
                                background:rgba(255,255,255,.05);
                                & > cite{
                                    padding:0 0 0 8px;
                                }
                            }
                        }
                        &.layui-this {
                            background: rgba(78, 49, 49, 0);
                            & > a{
                                // background: linear-gradient(98deg,@primaryColor,darken(@primaryColor,20%) 90%) !important;
                                background:rgba(0,0,0,.3);
                                box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.4);
                                border-radius: 6px;
                                &:hover{
                                    // background-color: linear-gradient(98deg,@primaryColor,darken(@primaryColor,20%) 90%) !important;
                                }
                            }
                        }
                        &>.layui-nav-child{
                            animation: hideMenu .3s;
                            // display: block;
                            // transition: max-height 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
                            // max-height: 20px;
                            // overflow: hidden;
                        }
                    }
                    .layui-nav-itemed{
                        // border-radius: 0 24px 24px 0;
                        // border:1px solid rgba(255, 255, 255, 0.2);
                        background-color: rgba(255, 255, 255, 0.08);
                        // border-left:1px solid #fff;
                        &>a,&>a:hover{
                            background:rgba(255,255,255,.2);
                            .layui-nav-more{
                                margin: 0;
                                transform:rotate(90deg);
                            }
                        }
                        &> .layui-nav-child{
                            box-sizing: border-box;
                            background-color: rgba(0,0,0,0)!important;
                            padding:6px;
                            border: 0 !important;
                            // max-height: 500px;
                            // display: block;
                            a{
                                &::before{
                                    // content: "";
                                    display: none;
                                }
                            }
                            .layui-this{
                                &>a{
                                    border:0 !important;
                                }
                            }
                        }
                    }
                    // & > .layui-nav-itemed {
                    //     & > .layui-nav-child {
                    //         background-color: rgba(0, 0, 0, 0.2) !important;
                    //         & > .layui-this {
                    //             background: rgba(255, 255, 255, 0.05);
                    //             & > a {
                    //                 background: none;
                    //             }
                    //         }
                    //     }
                    // }
                }
                
            }
        }
	}
}
